<template>
    <el-button @click="handleClick" type="primary">
        <slot></slot>
    </el-button>
    <div class="m-choose-icon-dialog-body-height">
        <el-dialog :title="title" v-model="aVisible">
            <div class="container">
                <div class="item" v-for="(item, index) in Object.keys(Icons)" :key="index" @click="clickItem(item)">
                    <div class="text">
                        <component :is="`el-icon-${toLine(item)}`"></component>
                    </div>
                    <div class="icon">{{ item }}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { toLine } from "../../../utils"
import { useCopy } from "../../../hooks/useCopy"
import * as Icons from '@element-plus/icons-vue'
import { ref, watch } from 'vue';
let props = defineProps<{
    // 弹出框的标题
    title: string,
    // 控制弹出框的显示隐藏
    visible: boolean
}>()
let aVisible = ref<boolean>(props.visible);
let emits = defineEmits(['update:visible'])

//点击按钮显示弹出框
let handleClick = () => {
    emits("update:visible", !props.visible);
}
//点击图标
let clickItem = (item: string) => {
    let text = `<el-icon-${toLine(item)}/>`;
    useCopy(text)
    aVisible.value = false
}

// 监听visible的变化 
watch(() => props.visible, val => {
    aVisible.value = val;
})
// 监听组件内部aVisible的变化 
watch(() => aVisible.value, val => {
    emits("update:visible", val);
})
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    cursor: pointer;
    height: 70px;
}

.text {
    font-size: 14px;
}

.icon {
    flex: 1
}

svg {
    width: 2em;
    height: 2em;
}
</style>